<template>
    <el-dialog :title="roleTitle" :visible.sync="roleOpen" width="25%"  :before-close="closeDelDialog">
        <el-form ref="roleForm" :model="roleForm" :rules="roleRules" label-width="80px">
            <el-form-item label="名称" prop="name">
                <el-input v-model="roleForm.name" placeholder="请输入名称" maxlength="30" />
            </el-form-item>
            <el-form-item label="开始时间" prop="starttime">
                <el-date-picker v-model="roleForm.starttime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                    value-format="yyyyMMdd" style="width: 100%">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endtime" style="width: 100%">
                <el-date-picker v-model="roleForm.endtime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                    value-format="yyyyMMdd" style="width: 100%">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="创建人" prop="creator">
                <el-input v-model="roleForm.creator" maxlength="30" disabled />
            </el-form-item>

            <el-form-item label="创建时间" prop="create_time">
                <el-date-picker v-model="roleForm.create_time" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                    value-format="yyyyMMdd" style="width: 100%" disabled>
                </el-date-picker>
            </el-form-item>

          <el-form-item label="是否默认" prop="isMoren">
            <el-radio v-model="roleForm.isMoren" :label="1">是</el-radio>
            <el-radio v-model="roleForm.isMoren" :label="0">否</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitRoleForm">保 存</el-button>
            <el-button @click="closeDelDialog">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { getCodeRule, addCodeRule, updateCodeRule} from "@/api/archive/archivesCategory.js";
import { getInfo } from "@/api/login";
export default {
    props: ["roleOpen", "roleTitle"],
    data() {
        return {
            // 档号定义规则表单参数
            roleForm: {
              name: undefined,
              starttime: undefined,
              endtime: undefined,
              creator: undefined,
              create_time: undefined,
              isMoren: undefined
            },
            val: "",
            categoryModelId: "",
            // 档号定义规则表单校验
            roleRules: {
                name: [
                    { required: true, message: '名称不能为空', trigger: 'blur' }
                ],
                starttime: [
                    { required: true, message: '开始时间不能为空', trigger: 'blur' }
                ],
                endtime: [
                    { required: true, message: '结束时间不能为空', trigger: 'blur' }
                ]
            },
        }
    },
    created() {



    },
    methods: {

        init(val, categoryModelId) {
            this.val = val;
            //接收父组件传递的id值
            if (val.length > 0) {
                //修改
                getCodeRule({ Id: val }).then(response => {
                    console.log(response)
                    this.roleForm = response.rows[0];
                    this.roleForm.starttime = this.roleForm.starttime.toString();
                    this.roleForm.endtime = this.roleForm.endtime.toString();
                });
            } else {
                //添加
                getInfo().then(res => {
                    const date = new Date()
                    const year = date.getFullYear()
                    const month = ('0' + (date.getMonth() + 1)).slice(-2)
                    const day = ('0' + date.getDate()).slice(-2)
                    this.roleForm.create_time = year + "" + month + "" + day;

                    this.$set(this.roleForm, 'creator', res.user.nickName) //现在载触发upadate去修改视图也能改变了
                    this.$set(this.roleForm, 'create_time', year + "" + month + "" + day) //现在载触发upadate去修改视图也能改变了
                    this.roleForm.categoryModelId=categoryModelId
                    this.$set(this.roleForm, 'isMoren', 0) //现在载触发upadate去修改视图也能改变了

                })
            }
        },

        // 档号定义规则添加提交
        submitRoleForm() {
            this.$refs["roleForm"].validate((valid) => {
                if (valid) {
                    if(this.roleForm.endtime < this.roleForm.starttime) {
                      this.$modal.msgWarning('开始时间不能大于结束时间')
                      return;
                    }
                    if (this.roleForm.id != undefined) {
                        updateCodeRule(this.roleForm).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.resetThird();
                            this.$emit("submitRoleForm")
                        });
                    } else {
                        addCodeRule(this.roleForm).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.resetThird();
                            this.$emit("submitRoleForm")
                        });
                    }
                }
            })
        },
        //关闭页面
        closeDelDialog(){
            this.$emit("roleCancel")
            this.$refs["roleForm"].resetFields();
            this.roleForm.id = undefined;
        },
        // 档号定义规则表单重置
        resetThird() {
            this.roleForm = {
                id: undefined,
                name: undefined,
                starttime: undefined,
                endtime: undefined,
                categoryModelId: undefined,
                creator: undefined,
                create_time: undefined
            }
        },
    }
}
</script>

<style scoped>
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
</style>
